<extend name="Public/base"/>

<block name="body">
    <div class="main-title">
        <h2>【{$title}】的视频推荐列表 <button class="btn btn-default btn-return" onclick="javascript:history.back(-1);return false;"><i class="glyphicon glyphicon-share-alt"></i> 返 回</button></h2>
    </div>
    <div class="cf">
    </div>
    <div class="tab-content">
    <notempty name="data">
        <form action="" method="post" class="form">
            <div class="form-item cf">
                <label class="item-label">显示排序<span class="check-tips">（直接拖动进行排序 红叉进行删除）</span></label>
                <div class="controls">
                    <div class="form-item cf edit_sort edit_sort_l form_field_sort">
                        <ul class="dragsort needdragsort" data-group="1">
                            <volist name="data" id="d">
                                <li class="getSort">
                                       <a class="close js-delete fr" style="width:20px; height:20px; border-radius:50%; border:1px solid #F00; margin-top:5px;text-align:center; line-height:15px;font-size:18px; color:#F00;">×</a>
                                    <em data="{$d.video.id}">{$d.video.title} [{$d.race.title}]</em>
                                    <input type="hidden" name="videos[]" value="{$d.video.id}&{$d.race.id}"/>
                                 
                                </li>
                            </volist>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="form-item form-group form-action">
                <button class="btn submit-btn ajax-post btn-success btn-block" id="submit" onclick="do_submit();" type="submit" target-form="form">确 定 提 交</button>
            </div>
        </form>
    <else />
        <div class="form-item">
            <div class="controls">
                <font color="red"><strong>请先在“比赛列表”设置推荐的视频</strong></font>
            </div>
        </div>
        <br><br>
        <div class="form-item">
        </div>
    </notempty>
    </div>
</block>

<block name="script">
    <script type="text/javascript" src="__STATIC__/jquery.dragsort-0.5.1.min.js"></script>
    <script type="text/javascript">

         //确认提交前把selected框所有选中
        function do_submit(){
            $('#selected_video').find('option').prop('selected',true);
        }

        //拖曳插件初始化
        $(function(){
            $(".needdragsort").dragsort({
                 dragSelector:'li',
                 placeHolderTemplate: '<li class="draging-place">&nbsp;</li>',
                 dragBetween:true,  //允许拖动到任意地方
                 dragEnd:function(){
                     var self = $(this);
                     self.find('input').attr('name', 'videos[]');
                 }
             });
             $(".js-delete").on("click",function(){
                 $(this).parent().remove();
             });
        })

        //导航高亮
        highlight_subnav('{:U('RaceGroup/index')}');
        showTab();

    </script>
</block>
